<template>
  <div>
    <main-body :menuData="menu" :menuList="menu" getPath="/menu/index" setTitle="导航菜单"></main-body>
  </div>
</template>
<script>
import { menuData } from './jsMenu'
import MainBody from '@/components/MainBody.vue'
export default {
  name: 'menu',
  components: {
    MainBody
  },
  data() {
    return {
      menu: menuData
    }
  },
  methods: {
    getTitle(arr, path) {
      if (path === '/menu/index') {
        document.title = '导航菜单'
        return false
      }
      for (let i = 0, len = arr.length; i < len; i++) {
        if (arr[i].path === path) {
          document.title = arr[i].title + ' - 导航菜单'
        } else {
          if (arr[i].children.length > 0) {
            this.getTitle(arr[i].children, path)
          }
        }
      }
    }
  },
  watch: {
    "$route.path": {
      handler(e) {
        this.getTitle(this.menu, e)
      },
      immediate: true,
      deep: true
    }
  }
}
</script>